<template>
  <div>
    <h3>商品管理 - 查询商品</h3>
    <el-form :model="queryDto" ref="queryForm" label-width="120px">
      <el-form-item label="商家">
        <el-select v-model="queryDto.merchantId" placeholder="请选择商家">
          <el-option
              v-for="merchant in merchantList"
              :key="merchant.id"
              :label="merchant.shopName"
              :value="merchant.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品状态">
        <el-select v-model="queryDto.status" placeholder="请选择商品状态（可选）">
          <el-option
              v-for="status in statusList"
              :key="status.value"
              :label="status.label"
              :value="status.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="queryProducts">查询商品</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="productList" stripe>
      <el-table-column prop="id" label="商品 ID"></el-table-column>
      <el-table-column prop="merchantId" label="商家 ID"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="description" label="商品描述"></el-table-column>
      <el-table-column prop="price" label="商品价格"></el-table-column>
      <el-table-column prop="stock" label="商品库存"></el-table-column>
      <el-table-column prop="unit" label="商品单位"></el-table-column>
      <el-table-column prop="origin" label="商品产地"></el-table-column>
      <el-table-column prop="imageUrls" label="商品图片">
        <template #default="scope">
          <img :src="scope.row.imageUrls" style="width: 100px; height: 100px;">
        </template>
      </el-table-column>
      <el-table-column prop="status" label="商品状态"></el-table-column>
      <el-table-column prop="sales" label="商品销量"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="updateTime" label="更新时间"></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

// 定义查询表单数据
const queryDto = ref({
  merchantId: null,
  status: null
});

// 表单引用
const queryForm = ref(null);

// 定义商品列表
const productList = ref([]);

// 定义商家列表
const merchantList = ref([]);

// 定义商品状态列表
const statusList = ref([
  { value: 0, label: '待审核' },
  { value: 1, label: '已审核' },
  { value: 2, label: '已下架' }
]);

// 获取商家列表
const getMerchantList = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/api/v1/merchant/selStore`, {
      withCredentials: true
    });
    if (response.data.code === 2000) {
      merchantList.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg || '获取商家列表失败');
    }
  } catch (error) {
    console.error('获取商家列表失败:', error);
    ElMessage.error('获取商家列表失败，请稍后重试');
  }
};

// 定义查询商品方法
const queryProducts = async () => {
  if (!queryDto.value.merchantId) {
    ElMessage.error('请选择商家');
    return;
  }

  try {
    // 发送查询商品请求
    const response = await axios.get(`${BASE_URL}/api/v1/merchant/selProduct`, {
      params: queryDto.value,
      withCredentials: true
    });

    if (response.data.code === 2000) {
      productList.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg || '查询商品失败');
    }
  } catch (error) {
    console.error('查询商品失败:', error);
    ElMessage.error('查询商品失败，请稍后重试');
  }
};
// 页面挂载时获取商家列表
onMounted(() => {
  getMerchantList();
});
</script>

<style scoped>
/* 可以根据需要添加样式 */
</style>